<template>
  <div>
    <a-dropdown style="display: block; height: 100%;font-size: 0">
      <a-badge :count="msgCount" :offset="[10, 18]" :overflowCount=99 :number-style="{boxShadow: '0 0 0 0'}">
      <span style="display: flex;align-items: center;">
        <a-avatar class="avatar" size="small" shape="circle" :src="avatar"/>
        <span class="curr-user">{{user.nickName}}（{{user.loginId}}）</span>
      </span>
      </a-badge>
      <a-menu style="width: 150px" slot="overlay">
        <a-menu-item @click="openProfile">
          <a-icon type="user"/>
          <span>个人中心</span>
        </a-menu-item>
        <a-menu-item @click="openMessage">
          <a-icon type="sound"/>
          <span>个人消息</span>
          <a-badge :count="msgCount" :offset="[0, -5]"/>
        </a-menu-item>
        <a-menu-item @click="updatePassword">
          <a-icon type="key"/>
          <span>密码修改</span>
        </a-menu-item>
        <a-menu-divider></a-menu-divider>
        <a-menu-item @click="handleSettingClick">
          <a-icon type="setting"/>
          <span>系统定制</span>
        </a-menu-item>
        <a-menu-divider></a-menu-divider>
        <a-menu-item @click="logout">
          <a-icon type="logout"/>
          <span>退出登录</span>
        </a-menu-item>
        <a-menu-divider></a-menu-divider>

        <a-menu-item @click="reloadCache" v-if="this.user.admin">
          <a-icon type="key"/>
          <span>刷新缓存</span>
        </a-menu-item>

      </a-menu>
    </a-dropdown>

    <update-password
      @success="handleUpdate"
      @cancel="handleCancelUpdate"
      :user="user"
      :updatePasswordModelVisible="updatePasswordModelVisible">
    </update-password>


    <reload-cache
      @success="handlereload"
      @cancel="handleCancelreload"
      :user="user"
      :reloadCacheModelVisible="reloadCacheModelVisible">
    </reload-cache>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import UpdatePassword from '../personal/UpdatePassword'
import ReloadCache from '../reloadCache/ReloadCache'

export default {
  name: 'HeaderAvatar',
  components: {UpdatePassword,ReloadCache},
  data () {
    return {
      msgCount: 0,
      timer: null,
      timerInterval: 0,
      updatePasswordModelVisible: false,
      reloadCacheModelVisible: false,
    }
  },
  computed: {
    ...mapState({
      settingBar: state => state.setting.settingBar.opened,
      user: state => state.account.user
    }),
    avatar () {
      return `static/avatar/${this.user.userImagePath}`
    }
  },
  methods: {
    getUnreadMessageCount () {
      this.$get(`admin/userMessage/getUnreadMessageCount`).then((r) => {
        this.timerInterval = r.data.interval
        this.msgCount = r.data.count
        if (this.timer === null) {
          this.timer = setInterval(this.getUnreadMessageCount, this.timerInterval)
        }
        if (this.msgCount !== r.data.count && this.timer !== null) {
          clearInterval(this.timer)
          this.timer = setInterval(this.getUnreadMessageCount, this.timerInterval)
        }
      })
    },
    handleSettingClick () {
      this.setSettingBar(!this.settingBar)
    },
    openProfile () {
      this.$router.push('/profile')
    },
    openMessage () {
      this.$router.push('/message')
    },
    updatePassword () {
      this.updatePasswordModelVisible = true
    },
    reloadCache () {
      this.reloadCacheModelVisible = true
    },
    handleCancelUpdate () {
      this.updatePasswordModelVisible = false
    },
    handleCancelreload () {
      this.reloadCacheModelVisible = false
    },
    handleUpdate () {
      this.updatePasswordModelVisible = false
      this.$message.success('更新密码成功，请重新登录系统')
      setTimeout(() => {
        this.logout()
      }, 1500)
    },
    handlereload () {
      this.reloadCacheModelVisible = false
      this.$message.success('刷新缓存成功')
    },
    logout () {
      this.$get(`admin/logout/${this.user.id}`).then(() => {
        return new Promise((resolve, reject) => {
          this.$db.clear()
          location.reload()
        })
      }).catch(() => {
        this.$message.error('退出系统失败')
      })
    },
    ...mapMutations({setSettingBar: 'setting/setSettingBar'})
  },
  created () {
    this.getUnreadMessageCount()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style lang="less" scoped>
  .ant-avatar-sm {
    width: 30px;
    height: 30px;
  }
  .avatar {
    margin: 14px 4px 14px 0;
    color: #1890ff;
    background: hsla(0, 0%, 100%, .85);
    vertical-align: middle;
  }
  .curr-user {
    font-weight: 600;
    margin-left: 6px;
    font-size: 14px;
  }
</style>
